<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>作业3浮动练习</title> 
    <style>
    	   *{margin:0;padding:0;}
    	   body{
    	   	  background:#ccc;
    	   }
    	   .container{
    	   	       width:800px;
    	   	       height:120px;
    	   	       border:10px black solid;
    	   	       margin:50px auto;
    	   }
    	   .box{
    	   	   float:left;
    	   	   margin-left:25px;
    	   	   border:10px #fff solid;
    	   	   position:relative;
               }

    	   img{
    	   	display:block;
    	   	width:150px;
    	   	height:100px;
    	   }
    	   .txt{
    	   	   position:absolute;
    	   	   width:150px;
    	   	   height:20px;
    	   	   background-color:rgba(0,0,0,0.5);
    	   	   bottom:0;
    	   	   text-align:center;
    	   	   line-height:20px;
    	   	   color:#fff;
    	   }
    	   .box>.txt{
            	display:none;
            }
    	   .box:hover .txt{
                display:block;
    	   }
    </style>
</head>
<body>
	 <div class="container">
	 	<div class="box"><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2535245225,3966207060&fm=27&gp=0.jpg">
	 	<div class="txt">远方</div>
	 	</div>
	 	<div class="box"><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2535245225,3966207060&fm=27&gp=0.jpg">
	 	<div class="txt">未来</div>
	 	</div>
	 	<div class="box"><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2535245225,3966207060&fm=27&gp=0.jpg">
	 	<div class="txt">向往</div>
	 	</div>
	 	<div class="box"><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2535245225,3966207060&fm=27&gp=0.jpg">
	 	<div class="txt">追求</div>
	 	</div>
	 </div>
</body>
</html>